<script setup lang="ts">
import { useAppStore, useControllerStore } from '@/store';
import EventCollection from '@/pages/home/eventCollection';
const store = useControllerStore();
const show = ref<boolean>(false);

watch(
  () => store.$state.mergerCaseModalData,
  (value) => {
    show.value = !!value;
  },
);

const handlePress = (item: IBtnFormatsList) => {
  EventCollection.onPress(item, 1);
  useAppStore().$patch({ btnInformation: { ...item, moduleType: 1 } as IServerBtnListBtnList });
  store.$patch({ mergerCaseModalData: undefined });
};
</script>

<template>
  <van-popup :show="show" @close="() => store.$patch({ mergerCaseModalData: undefined })">
    <view class="c-br c-pd w-screen flex justify-center" v-if="store.$state.mergerCaseModalData">
      <scroll-view scroll-y class="c-br bg-white max-h-[50vh] w-[80%]">
        <view class="px-[12px] pt-[12px]">
          <view class="flex mb-[12px]" v-for="item in store.$state.mergerCaseModalData" :key="item.id" @click="handlePress(item)" @longpress="EventCollection.onLongPress(item)">
            <view class="c-br w-[80px] h-[80px] overflow-hidden">
              <van-image width="100%" height="100%" fit="cover" :src="item.value" />
            </view>
            <view class="flex-1 flex flex-col justify-evenly pl-[12px]">
              <view class="fw-bold">{{ item.name }}</view>
              <view class="c-text-color-grey">
                <text class="c-text-ellipsis-2">{{ item.describes }}</text>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </van-popup>
</template>
